<template>
	<view>
		<view class="space"></view>
		<view class="body">
			<view v-show="show" class="btn">
				<view @click="toAddPage(1)">寻找失主</view>
				<view @click="toAddPage(2)">悬赏</view>
			</view>

			<view v-for="(item, index) in list" :style="tabbarStyle(item)" :key="`tabbar-${index}`"
				@click="setChecked(item,index)">
				<image :src="setIcon(item)"></image>
				<text>{{ item.text }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'Tabbar',
		props: {
			list: {
				type: Array,
				default: [{
					pagePath: "/pages/index/index",
					iconPath: "/static/index/icon_sy_wxz.png",
					selectedIconPath: "/static/index/icon_sy_xz.png",
					text: "首页"
				}, {
					pagePath: "/pages/square/square",
					iconPath: "/static/index/icon_gc_wxz.png",
					selectedIconPath: "/static/index/icon_gc_xz.png",
					text: "广场"
				}, {
					iconPath: '/static/index/icon_tj.png',
					selectedIconPath: '/static/index/icon_gb.png',
					id: 1
				}, {
					pagePath: "/pages/message/message",
					iconPath: "/static/index/icon_xx_wxz.png",
					selectedIconPath: "/static/index/icon_xx_xz.png",
					text: "消息"
				}, {
					pagePath: "/pages/my/my",
					iconPath: "/static/index/icon_wd_wxz.png",
					selectedIconPath: "/static/my/icon_wd_xz.png",
					text: "我的"
				}]
			},
			color: {
				type: String,
				default: '#000000'
			},
			selectedColor: {
				type: String,
				default: '#ffffff'
			},
			show: false,
		},
		created() {
			const pages = getCurrentPages()
			this.path = `/${pages[pages.length - 1].route}`
			console.log('pages:' + this.path);
		},
		data() {
			return {
				path: '',
			}
		},
		computed: {
			tabbarStyle() {
				return item => {
					if (this.path === item.pagePath) {
						return {
							color: this.selectedColor,
							width: `${100 / this.list.length}%`
						}
					} else {
						return {
							color: this.color,
							width: `${100 / this.list.length}%`
						}
					}
				}
			}
		},
		methods: {
			setIcon(item) {
				if (this.path === item.pagePath) {
					return item.selectedIconPath
				} else {
					return item.iconPath
				}
			},
			addFlag() {
				this.show = false
				this.list[2].iconPath = '/static/index/icon_tj.png'
			},
			toAddPage(value) {
				value = value === 1 ? '寻找失主' : '悬赏'
				this.addFlag()
				this.$to(`../midButtonPage-release/midButtonPage-release?type=${value}`)
			},

			setChecked(item, index) {
				console.log('index', index);
				if (item.id === 1) {
					this.show = !this.show
					this.show ? item.iconPath = item.selectedIconPath : item.iconPath = "/static/index/icon_tj.png"
					return
				}
				this.addFlag()
				if (this.path === item.pagePath) return
				console.log("现在的页面" + this.path);
				this.show = false
				uni.switchTab({
					url: item.pagePath
				})
			}
		}
	}
</script>

<style>
	.space {
		height: 100rpx;
	}

	.body {
		width: 100vw;
		height: 120rpx;
		position: fixed;
		bottom: 0;
		background-color: #373737;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 25rpx;
	}

	.body .btn {
		position: absolute;
		/* z-index: 99; */
		bottom: 150rpx;
		display: flex;
		flex-direction: row;
		/* background-color: #007AFF; */
		/* margin-right: 100rpx!important; */
	}

	.body .btn view {
		width: 250rpx;
		height: 65rpx;
		background-color: #FFFFFF;
		border: 1rpx solid #373737;
		border-radius: 10rpx;
		margin: 0 20rpx;
	}

	.body view {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.body view:nth-child(4) {
		/* height: 200rpx; */
		padding-bottom: 100rpx;
	}

	.body view:nth-child(4) image {
		height: 65rpx;
		width: 65rpx;
	}

	.body image {
		width: 50rpx;
		height: 50rpx;
	}
</style>
